<template>
  <div id="login">
    <s-nav-bar title="账号登录/注册"></s-nav-bar>
    <div class="login-h">
      <h1>喜阅账号登录/注册</h1>
      <p>新手机号将自动注册</p>
    </div>
    <div class="phone-block" v-show="true">
      <div :class="{'login-input-box':true,'on-input':focusMap.phone}">
        <van-field
          type="digit"
          maxlength="11"
          v-model="Vphone"
          @focus="onfocus('phone')"
          @blur="onblur('phone')"
          clearable
          placeholder="输入手机号"
        />
      </div>
      <div class="code-box" v-if="vcodeLogin">
        <div :class="{'login-input-box':true,'on-input':focusMap.vcode}">
          <van-field
            v-model="Vcode"
            @focus="onfocus('vcode')"
            @blur="onblur('vcode')"
            placeholder="输入验证码"
          />
        </div>
        <div class="getcode c-text" :class="{'on-input':focusMap.vcode}" @click="getVcode">获取验证码</div>
      </div>
      <div :class="{'login-input-box':true,'on-input':focusMap.pw}" v-else>
        <van-field
          v-model="Vpw"
          @focus="onfocus('pw')"
          @blur="onblur('pw')"
          type="password"
          placeholder="输入密码"
        />
      </div>
      <p v-if="vcodeLogin" class="pw-login"><a @click="toggleLogin" href="javascript:;">密码登录</a></p>
      <p v-else class="vcode-login"><a @click="toggleLogin" href="javascript:;">验证码登录</a></p>
      
      <div :class="{'login-next':true,'disable':disable}">登录</div>
    </div>
    <!-- 设置初始密码 -->
    <div class="setpw-block" v-show="false">
      <div class="login-input-box">
        <van-field
          v-model="Vpw"
          :type="typeObj[typeIndex].type"
          :right-icon="typeObj[typeIndex].icon"
          @click-right-icon="toggleType"
          placeholder="8位以上密码，区分大小写"
        />
      </div>
      <div :class="{'login-next':true,'disable':disable}">确认密码</div>
    </div>
  </div>
</template>

<script>
import sNavBar from '@/components/sNavBar.vue'
export default {
  components:{
    sNavBar
  },
  data(){
    return {
      Vphone:'',
      Vcode:'',
      Vpw:'',
      focusMap:{
        phone:false,
        vcode:false,
        pw:false
      },
      timer:null,
      vcodeLogin:true,
      disable:true,
      typeObj:{
        '1':{type:'password',icon:'closed-eye'},
        '-1':{type:'text',icon:'eye'}
      },
      typeIndex:1
    }
  },
  methods:{
    toggleType(){
      this.typeIndex = -this.typeIndex
    },
    toggleLogin(){
      this.Vphone = '';
      this.Vcode = '';
      this.Vpw = '';
      clearInterval(this.timer)
      this.timer = null
      this.vcodeLogin = !this.vcodeLogin
    },
    getVcode(){
      if(this.timer){
        return
      }
      if(this.Vphone.length !== 11){
        this.$toast('请输入正确的手机号')
      }else{
        let vcodeWrap = document.querySelector('.getcode');
        let time = 60,that = this;
        vcodeWrap.style.cssText = "color:#969799;border-color:#ff976a"
        vcodeWrap.textContent = `${time}s 后重新发送`;
        that.timer = setInterval(function(){
          vcodeWrap.textContent = `${--time}s 后重新发送`;
          if(time==0){
            clearInterval(that.timer);
            that.timer = null;
            vcodeWrap.textContent = "重新发送"
            vcodeWrap.style.cssText = "color:#ff5722;border-color:#ccc"
          }
        },1000)
        
      }
    },
    onfocus(target){
      this.focusMap[target] = true
    },
    onblur(target){
      this.focusMap[target] = false
    },
    goback(){
     
    }
  },
  watch:{
    Vphone:function(val){
      if(val.length === 11 && (this.Vcode.length || this.Vpw.length)){
        this.disable = false
      }else{
        this.disable = true
      }
    },
    Vcode:function(val){
      if(val.length && this.Vphone.length === 11){
        this.disable = false
      }else{
        this.disable = true
      }
    },
    Vpw:function(val){
      if(val.length && this.Vphone.length === 11){
        this.disable = false
      }else{
        this.disable = true
      }
    }
  }
}
</script>

<style>
#login{
  padding: 50PX 10% 0;
  overflow: hidden;
}
.login-h{
  text-align: center;
  margin-bottom: 20PX;
}
.login-h>h1{
  font-size: 30PX;
  font-weight: normal;
}
.login-h>p{
  font-size: 13PX;
  margin-top: 7PX;
  color:#bababa;

}
.login-input-box,.login-next{
  margin: 0 auto;
}
.login-input-box{
  margin-bottom: 20PX;
}
.c-text,.login-input-box{
  border-bottom: 2PX solid #ccc;
}
.code-box{
  display: flex;
}
.code-box>.login-input-box{
  flex: 1.5;
}
.getcode{
  font-size: 15PX;
  line-height: 33PX;
  text-align: center;
  color:#ff5722;
  margin-bottom: 20PX;
  margin-left: 5PX;
  flex: 1;
}
.on-input{
  border-color:#ff976a !important;
}
.c-img{
  display: block;
  width: 100%;
 height: 35PX;
}
.login-next{
  line-height: 35PX;
  background: #ff976a;
  color: #fff;
  font-size: 16px;
  text-align: center;
  border-radius: 3PX;
}
#login .disable{
  background: rgba(255, 151, 106, .5);
}
#login .van-icon{
  font-size: 20PX;
}
.login-input-box>div{
  padding: 5PX 0;
}
#login .number{
  font-size: 16PX;
  color: #999;
  margin-bottom: 25PX;
}
#login .number>b{
  color: #101010;
  font-weight: normal;
  margin-left: 10px;
}


/* pwlogin-block */


.vcode-login,.pw-login{
  font-size: 15PX;
  text-align: right;
  margin-bottom: 25PX;
}
.vcode-login>a,.pw-login>a{
  color: #ff5722;
}
</style>